<template>
    <div id="cpSet">
        <div id="modle">
            <el-dialog :title="title" class="dialogAdd" width="600px"   :visible.sync="dialogAddgsVisible"  @close="closeDialogAddgsVisible">
                <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-right: 20px;" label-position="right" label-width="110px">
                    <el-form-item label="上传菜品图:" prop="imgSrc">
                        <input type="file" ref="fileBtn" @change="uploadImg" />
                        <img :src="addForm.file" style="width: 80px;height: 80px" class="img" ref="img" />
                    </el-form-item>
                    <el-form-item label="菜名:"  prop="name">
                        <el-input   placeholder="请输入内容" v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="类型:" prop="classifyId" >
                        <el-input   placeholder="请输入内容" v-model="addForm.classifyId"></el-input>
                    </el-form-item>
                    <el-form-item label="价格:" prop="price" >
                        <el-input   placeholder="请输入内容" v-model="addForm.price"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="电话:" prop="tel" >-->
<!--                        <el-input   placeholder="请输入内容" v-model="addForm.tel"></el-input>-->
<!--                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="dialogAddgsVisible = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveAddForm">确 定</el-button>
                </div>
            </el-dialog>

        </div>
        <div id="modle1">
            <el-dialog :title="title1" class="dialogBianJi" width="600px"   :visible.sync="dialogAddgsVisible1"  @close="closeDialogAddgsVisible1">
                <el-form :model="bianForm" :rules="Rules" ref="bianForm" style="margin-right: 20px;" label-position="right" label-width="110px">
                    <el-form-item label="编号:"  prop="id">
                        <el-input   placeholder="请输入内容" v-model="bianForm.id"></el-input>
                    </el-form-item>
                    <el-form-item label="菜名:"  prop="name">
                        <el-input   placeholder="请输入内容" v-model="bianForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="类型:" prop="classifyId" >
                        <el-input   placeholder="请输入内容" v-model="bianForm.classifyId"></el-input>
                    </el-form-item>
                    <el-form-item label="价格:" prop="price" >
                        <el-input   placeholder="请输入内容" v-model="bianForm.price"></el-input>
                    </el-form-item>
                    <!--                    <el-form-item label="电话:" prop="tel" >-->
                    <!--                        <el-input   placeholder="请输入内容" v-model="addForm.tel"></el-input>-->
                    <!--                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="dialogAddgsVisible1 = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveBianForm">确 定</el-button>
                </div>
            </el-dialog>

        </div>
        <div id="souSuo">
            <el-card class="filter-container" shadow="never">
                <div>
                    <i class="el-icon-search"></i>
                    <span>筛选搜索</span>
                    <el-button style="float:right" type="primary" @click="chaXun3" size="small">查询搜索</el-button>
                    <el-button
                            style="float:right;margin-right: 15px"
                            @click="handleResetSearch()"
                            size="small"
                    >重置</el-button>
                </div>
                <div style="margin-top: 15px">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="">
                            <el-select v-model="formInline.region" placeholder="菜名" ref='Option'>
                                <el-option label="菜名" value="shanghai"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="搜索内容">
                            <el-input v-model="formInline.user" ref='Title3' placeholder="请输入搜索内容"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
            <el-card class="operate-container" shadow="never">
                <i class="el-icon-tickets"></i>
                <span>数据列表</span>
                <el-button size="mini" class="btn-add" @click="handleSelectProduct()" style="float:right">添加商品</el-button>
            </el-card>
<!--            <h1>菜品设置</h1>-->
<!--            <input id="Title3" type="text" placeholder="请输入搜索内容">-->
<!--            <el-button @click="chaXun3">查询</el-button>-->
<!--            <el-button>添加</el-button>-->
        </div>
        <div id="myTable">
            <el-table
                    :data="pageArr"
                    border
                    style="width: 100%;height: 278px">
                <el-table-column
                        prop="id"
                        label="编号"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="菜名"
                >
                </el-table-column>
                <el-table-column
                        prop="classifyId"
                        label="类型"
                >
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template scope="scope">
                        <el-button  size="small" type="danger" @click="delTable3(scope.$index,scope.row)">删除</el-button>
                        <el-button  size="small" @click="bianJi(scope.$index,scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        background
                        hide-on-single-page
                        layout="prev,pager,next"
                        :total="pageNum"
                        :page-size="4"
                        :pager-count="7"
                        :current-page="currentPage"
                        @current-change="currentChange"
                >
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import VModal from 'vue-js-modal'
    // import {mapActions,mapState} from 'vuex'
    import $ from "jquery";
    export default {
        name:'cpset',
        data() {
            return {
                imgInfo: null,
                cprData: [],
                currentPage:1,
                formInline:{
                    user:"",
                    region:'',
                },
                addForm:{
                    name:"",
                    classifyId:"",
                    price:"",
                    id:"",
                    file:null
                },
                dialogAddgsVisible:false,
                title:'',
                rules: {
                    name: [
                        {required: true, message: "请输入活动名称", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    classifyId: [
                        {required: true, message: "请输入菜品类型", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    id: [
                        {required: true, message: "请输入身份证", trigger: "blur"},
                        {min: 1, message: "请输入数字编号", trigger: "blur"}
                    ],
                    price: [
                        {required:true, message: "请输入价格", trigger: "blur"},
                        {min: 1, max: 100, message: "请设置价格大于1的数字", trigger: "blur"}
                    ],
                },
                bianForm:{
                    name:"",
                    classifyId:"",
                    price:"",
                    id:""
                },
                dialogAddgsVisible1:false,
                title1:'',
                Rules: {
                    name: [
                        {required: true, message: "请输入活动名称", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    classifyId: [
                        {required: true, message: "请输入菜品类型", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    id: [
                        {required: true, message: "请输入身份证", trigger: "blur"},
                        {min: 1, message: "请输入数字编号", trigger: "blur"}
                    ],
                    price: [
                        {required:true, message: "请输入价格", trigger: "blur"},
                        {min: 1, max: 100, message: "请设置价格大于1的数字", trigger: "blur"}
                    ],
                }
            }
        },
        created() {
            this.xuanRan()
        },
         computed:{
            pageArr(){
                let kaishi=this.currentPage*4-3;
                let jieshu=this.currentPage*4;
                return  this.cprData.slice(kaishi-1,jieshu)
            },
             pageNum(){
                 return this.cprData.length
             }
        },
        methods:{
            async uploadImg() {
                var that = this;
                const inputFile = await this.$refs.fileBtn.files[0];
                let res;
                console.log('选了图片');
                console.log(inputFile);
                this.inputFile = inputFile;
                if (this.inputFile) {
                    let inputFile = this.inputFile;
                    if (inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif') {
                        alert('不是有效的图片文件！');
                        return;
                    }
                    this.imgInfo = Object.assign({}, this.imgInfo, {
                        name: inputFile.name,
                        size: inputFile.size,
                        lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
                    });
                    console.log(this.imgInfo);
                    const reader = new FileReader();
                    res = reader.readAsDataURL(this.inputFile);
                    console.log('我想想要获取流');
                    reader.onloadend = function() {
                        // var strBase64 = reader.result.substring(84);
                        var strBase64 = reader.result.substring(0);
                        console.log(strBase64);
                    };
                    reader.onload = function(e) {
                        console.log(e);
                        that.addForm.file = this.result;   // 注意:这里的this.result中,这个this不是vue实例,而是reader对象,所以之前用that接收vue示例  that.imgSrc
                    };
                } else {
                    return;
                }
            },
        // ...mapActions(['cpData']),
            //渲染表格的公共函数
            xuanRan(){
                this.$axios({
                    url:'/mgrsite/Admin/selectDishesMainAll',
                    method:'post',
                    // data:{}
                }).then(res=>{
                    this.cprData=res.data;
                    return this.cprData
                })
            },
            //搜索查询功能
            chaXun3(){
                if(this.formInline.user==''){
                    this.$message({
                        message:'搜索内容不能为空'
                    })
                }else {
                    this.$axios({
                        url:'/mgrsite/Admin/selectDishesMain',
                        method:'post',
                        data:{
                            "name":this.formInline.user
                        }
                    }).then(res=>{
                        if(res.data==''){
                            this.$message({
                                type:'warning',
                                message:'您搜索的内容不存在！'
                            })
                        }else {
                            this.cprData=res.data
                        }
                    })
                }

            },
            //删除数据
            delTable3(index,row){
                this.$confirm("数据不可恢复，是否确认删除","警告",{
                    confirmButtonText:"确认",
                    cancelButtonText:"取消",
                    type:"warning"
                }).then(()=>{
                    this.$axios({
                        url:'/mgrsite/SAdmin/deleteNameById',
                        method: 'post',
                        data:{"id":row.id}
                    }).then(res=>{
                        console.log(res.data)
                        if(res.data.Status==="success"){
                            this.$message({
                                message:"删除成功",
                                type:"success"
                            });
                            this.xuanRan()
                        }else {
                            this.$message({
                                message:"删除失败",
                                type:"error"
                            })
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        message:"已取消删除",
                        type:"info"
                    })
                });
            },
            //新增按钮，添加商品
            handleSelectProduct(){
                this.dialogAddgsVisible = true;
                this.title="新增"
            },
            //点击编辑按钮
            bianJi(index,row){
                this.dialogAddgsVisible1 = true;
                this.title1="修改"
                this.bianForm=row
            },
            //重置输入框里的东西
            handleResetSearch(){
                this.formInline.user = "";
                    this.formInline.region = "";
                // this.$refs.Option.value
                // this.$refs.Title3.value=""
            },
            //当点击下面的页数是，表格数据便跳转到哪一页
            currentChange(val){
                this.currentPage=val
            },
            //模态框内内容编辑保存
            saveBianForm(){
                this.$axios({
                    url:'/mgrsite/Admin/updatePriceById',
                    method:'post',
                    data:{"price":this.bianForm.price,
                    "name":this.bianForm.name,
                    "id":this.bianForm.id,
                    "classifyId":this.bianForm.classifyId}
                }).then(res=>{
                    if(this.bianForm.id==''||this.bianForm.price==''||this.bianForm.classifyId==''||this.bianForm.name==''){

                        this.$message({
                            message:'修改数据不能为空！'
                        })
                    }else {
                        if(res.data.Status=="success"){
                              this.$message({
                                  message:'修改成功'
                              })
                            this.xuanRan()
                        }else {
                            this.$message({
                                message:'修改失败',
                                type:'warning'
                            })
                        }
                    }
                })

            },
            //模态框内新增内容保存
            saveAddForm(){
                this.$axios({
                    url: '/mgrsite/Admin/initPage',
                    method: 'get',
                    data: {
                        // "delFlag": true,
                        "file":this.addForm.file,
                        "name": this.addForm.name,
                        "price": this.addForm.price,
                        "classifyId":this.addForm.classifyId,
                        // "salesNumber": 0
                    }
                }).then(res => {
                    console.log(res);
                    // this.cprData=res.data
                    // this.xuanRan()
                }).catch(error => {
                    console.log(error);
                });
                // if(this.addForm.id==''||this.addForm.price==''||this.addForm.classifyId==''||this.addForm.name==''){
                //     this.$message({
                //         message:'不能为空，请添加数据'
                //     })
                // }else {
                //     this.$message({
                //         message:'添加成功'
                //     })
                // }

            },
            //当点击取消和确认的时候，模态框里的值全部清空
            closeDialogAddgsVisible1(){
                this.$refs.bianForm.resetFields();//element封装的方法,清空模态框的值
                this.title="" //初始化title的值
                this.bianForm={//初始化addForm中的值
                    name:"",
                    price:"",
                    classifyId:"",
                    id:""
                }
            },
            //当点击取消和确认的时候，模态框里的值全部清空
            closeDialogAddgsVisible(){
                this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                this.title="" //初始化title的值
                this.addForm={//初始化addForm中的值
                    name:"",
                    price:"",
                    classifyId:"",
                    id:""
                }
            }
        }
    };
</script>

<style scoped lang="less">
    #souSuo{
        text-align: left;
        input{
            height:30px;
            margin-right: 20px;
            width: 300px;
        }
    }
    .block{
        position: absolute;
        left: 50%;
    }
    .operate-container{
        margin: 15px 0;
    }
    /*#myTable{*/
    /*    position: relative;*/
    /*}*/
</style>
